<template>
  <div>
    <el-dialog
      class="custom-export"
      :close-on-click-modal="false"
      :modal-append-to-body="false"
      lock-scroll
      top="10%"
      :visible.sync="exportDialog.isShow"
      :title="$t('business.exportBusiness')"
    >
      <div class="tips">{{ $t("business.exportTips") }}</div>
      <!-- 书签 -->
      <el-checkbox-group v-model="exportDialog.select" class="custom-export">
        <template v-for="option in exportDialog.headers">
          <el-checkbox :label="option.value">
            {{ option.name }}
            <el-tooltip
              :content="option.prompt"
              placement="top"
              v-if="option.prompt"
            >
              <i class="iconfont icon-wenzishuoming checkbox-tooltip"></i>
            </el-tooltip>
          </el-checkbox>
        </template>
      </el-checkbox-group>
      <div class="export-content" v-show="exportDialog.type === 'task'">
        <div class="export-content__item" v-if="exportType === 'real'">
          <span class="export-content__label">{{
            $t("business.exportType")
          }}</span>
          <el-radio-group v-model="exportDialog.fileType" size="mini">
            <el-radio label="csv"
              >{{ $t("business.csv") }}
              <span style="padding-right: 10px;color:#3b5998">{{
                $t("business.csvSmall")
              }}</span></el-radio
            >
            <el-radio label="excel">{{ $t("business.excel") }}</el-radio>
          </el-radio-group>
        </div>
        <div class="export-content__item">
          <span class="export-content__label" style="line-height: 28px">{{
            $t("business.downloadAgents")
          }}</span>
          <el-select
            v-model="exportDialog.downloadAgents"
            multiple
            collapse-tags
            filterable
            style="width: calc(100% - 150px)"
            :placeholder="$t('public.pickAgentTip1')"
            size="mini"
            class="mulit-select"
          >
            <el-option
              v-for="(item, index) in exportDialog.agents"
              :key="index"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </div>
      </div>
      <div class="footer">
        <el-button
          @click.stop="exportDialog.isShow = false"
          class="primary_btn"
        >
          {{ $t("public.cancel") }}
        </el-button>
        <el-button
          type="primary"
          @click.stop="exportExcel(exportDialog.type)"
          class="primary_btn"
        >
          {{ $t("public.confirm") }}
        </el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
    props: {
      exportDialog:Object,
      exportType:String
    },
    methods:{
        exportExcel (type) {
            console.log(type,"type")
            this.$emit('export', type)
        },
    }
};
</script>

<style type="text/stylus" lang="stylus" scoped >
@import "../../../assets/common.styl"
.custom-export
  label
    visibility visible
    margin 0 15px 15px 0
  .el-checkbox
    visibility visible
  .tips
    margin-bottom 15px
    color $c-prompt
  .checkbox-tooltip
    color $c-prompt
    font-size 14px
  .export-content
    padding 10px 0 20px
  .export-content__item
    display flex
    align-content center
    .export-content__label
      margin-right 15px
  .footer
    text-align center</style>
